<template>
  <div style="height:6vh;padding: 10px 20px;background-color: #fff">
    <span style="line-height: 60px;font-size: 20px">用户管理</span>
    <el-button style="float: right;margin-top: 10px;" @click="isShowDialog = true;dialogTitle = '新建用户'"
               type="primary">新建用户
    </el-button>
  </div>
  <el-dialog :title="dialogTitle"
             style="width: 1000px;padding: 40px"
             v-model="isShowDialog"
             @beore-close=""
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input :disabled="saveUserForm.id" v-model="saveUserForm.username" placeholder="请输入用户名"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="saveUserForm.mobile" placeholder="请输入手机号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input v-model="saveUserForm.email" placeholder="请输入邮箱"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.userSex">
              <el-radio border label="男" value="男" style="margin-right: 0px"></el-radio>
              <el-radio border label="女" value="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">

        <el-col :span="6">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.isDeleted">
              <el-radio border label="启用" :value="0" style="margin-right: 0px"></el-radio>
              <el-radio border label="禁用" :value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button @click="saveUser" type="primary">保存</el-button>
    </template>
  </el-dialog>

  <!--  用户搜索卡片-->
  <el-card>
    <el-form :inline="true">
      <el-form-item label="用户搜索" @keydown.enter="getUserList" style="width:220px">
        <el-input v-model="searchUserForm.username" @keydown.enter="getUserList" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width:290px">
        <el-select placeholder="请选择用户状态" v-model="searchUserForm.isDeleted" @change="getUserList">
          <el-option label="启用" :value="0"></el-option>
          <el-option label="禁用" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="getUserList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="margin: 20px">
    <el-table :data="userList" v-loading="isLoading">
      <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="手机号" prop="mobile" align="center"></el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="用户状态" prop="status" align="center">
        <template #default="scoped">
          <el-switch :active-value="0" @change="()=>changeStatus(scoped.row)" :inactive-value="1"
                     v-model="scoped.row.isDeleted"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button link type="primary" :disabled="row.level==40" @click="resetPassword(row.id)">密码重置</el-button>
          <el-button link type="primary" :disabled="row.level==40" @click="editUser(row)">编辑</el-button>
          <el-button link type="primary" :disabled="row.level==40" @click="deleteUser(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SimplePagination :fetch-data-fun="getUserList" v-model="pageParam" :total="total"/>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from 'element-plus';
import SimplePagination from '@/components/SimplePagination/index.vue'
import {
  findByPage,
  updateUserStatus,
  saveUser as saveUserApi,
  resetPassword as resetPasswordApi,
  deleteUser as deleteUserApi
} from "@/api/system/SysUserApi.js";
import {storeToRefs} from "pinia";
import {useGlobalStore} from "@/store/index.js";


const defaultPage = {
  page: 1,
  limit: 8
}
const {isLoading} = storeToRefs(useGlobalStore());
const isShowDialog = ref(false);
const dialogTitle = ref("新建用户");
const searchUserForm = ref({username: '', isDeleted: null});
const userList = ref([]);
const saveUserForm = ref({
  username: '',
  phone: '',
  email: '',
  gender: '',
  status: ''
});
const pageParam = ref({...defaultPage});
const total = ref(0);

const getUserList = async () => {
  const page = pageParam.value.page;
  const limit = pageParam.value.limit;
  const {list, total: t} = await findByPage(page, limit, searchUserForm.value)
  total.value = t;
  userList.value = list;
}

onMounted(() => {
  getUserList();
})

const resetSearch = () => {
  searchUserForm.value = {};
  getUserList();
}


const saveUser =async () => {
  await saveUserApi(saveUserForm.value);
  ElMessage.success(saveUserForm.value.id ?"修改成功" :"添加成功");
  getUserList();
  isShowDialog.value = false;
  saveUserForm.value = {};
}


const closeDialog = () => {
  isShowDialog.value = false;
  saveUserForm.value = {};
}

const resetPassword = async (userId) => {
  await resetPasswordApi(userId)
  ElMessage.success("操作成功")
}

const editUser = async row => {
  dialogTitle.value = '编辑员工';
  isShowDialog.value = true;
  saveUserForm.value = row;

}

const changeStatus = async ({id, isDeleted: status}) => {
  await updateUserStatus(id, status);
  ElMessage.success('修改成功!')
}

const deleteUser = async (id) => {
  await deleteUserApi(id);
  getUserList();
  ElMessage.success("删除成功!");

}
</script>

<style scoped>

</style>